<template>
  <div class="institutions-jobs-area">
     <el-row>
     <el-card class="shuxing-left">
    <el-tree :data="list"  :props="defaultProps" node-key="id"
      @node-click="handleNodeClick" icon-class="el-icon-caret-right" :highlight-current="true"></el-tree>
   </el-card>
  </el-row>
  <!-- 地图 -->
<div  class="work-area">
   <el-card>
        <template #header>
          <span class="header-text">作业范围</span>
          <el-button>编辑</el-button>
        </template>
        <div class="work-map">
          <span style="font-size:14px">地区关键词：</span>
          <el-input v-model="mapsearch" placeholder="请输入地区关键词" style="width:230px" />

        </div>

<baidu-map id="bm-view" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
    <bm-polygon :path="polygonPath" stroke-color="red" :stroke-opacity="0.5" :stroke-weight="1" :strokeStyle="'dashed'"
    :fillColor="'#f2c8c5'"
     :editing="true" @lineupdate="updatePolygonPath"/>
  </baidu-map>
      </el-card>
</div>
  </div>
</template>

<script>
// import { BMPGL } from '@/bmpgl.js'

import { getMapinfoApi, treeShapedApi } from '@/api/institution'
export default {
  name: 'Institutional-scope',
  data () {
    return {
      id: 1,
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      mapInfo: {},
      mapsearch: '',
      // ak: '5xNVZXEBWbAycRWvPen4RGubauPrshbN', // 百度的地图密钥
      // center: { lng: 116.404, lat: 39.915 }, // 经纬度
      // zoom: 12, // 地图展示级别
      polygonPath: [
        { lng: 116.412732, lat: 39.911707 },
        { lng: 116.39455, lat: 39.910932 },
        { lng: 116.403461, lat: 39.921336 }
      ]

    }
  },
  created () {
    this.getshuxungList()
  },
  methods: {
    async getshuxungList () {
      const res = await treeShapedApi()
      // console.log(res)
      this.list = JSON.parse(res.data)
      this.idValue = JSON.parse(res.data)
    },
    async  handleNodeClick (row) {
      console.log(row.id) // 拿到id
      const re = await getMapinfoApi(row.id)
      console.log(re)

      this.polygonPath = re.data.polygon
      this.polygonPath = re.data.polygon.map(item => {
        const obj = {}
        obj.lng = item.longitude
        obj.lat = item.latitude
        return obj
      })
      this.mapInfo = {
        lng: parseFloat(re.data.longitude),
        lat: parseFloat(re.data.latitude)
      }
    },
    updatePolygonPath (e) {
      this.polygonPath = e.target.getPath()
    }
  },
  mounted () {
    // this.initMap()
  }

}
</script>

<style lang="scss" scoped>
.institutions-jobs-area{
  display: flex;
  .work-area{
    flex: 1;
    // margin: 12px;
    .el-card{
     ::v-deep .el-card__header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-left: 20px;
        height: 60px;
        background-color: #f8faff;
        .header-text{
          font-size: 16px;
          font-weight: 700;
          color: #2a2929;
        }
       .el-button {
          width: 90px;
          background-color: #e15536;
          color: #fff;
          border-radius: 5px;
        }
      }
    }
  }
}
.shuxing-left {
  margin-right: 20px;
}
#bdMap{
  box-sizing: border-box;
  margin-top: 15px;
  min-height: 700px;
  // height: 100%;
  z-index: 0;
}
 #bm-view {
  width: 100%;
  height: 600px;
  margin-top: 20px;
}
</style>
